<template>
  <div class="category">
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
        v-for="item in categoryList"
        :key="item.id"
        :title="item.name"
        @click="handleClick(item.id)"
         />
      </van-sidebar>
    </div>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getCategories } from '@/api/home'
export default {
  name: 'Category',
  data () {
    return {
      activeKey: 0,
      categoryList: []
    }
  },
  async created () {
    const result = await getCategories()
    this.categoryList = result.list.slice(1)
    this.$router.push('/category/sub?id=' + this.categoryList[0].id)
  },
  methods: {
    handleClick (id) {
      this.$router.push('/category/sub' + '?id=' + id).catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
  .category{
    display: flex;
    height: 100%;
     .left{
       width: 80px;
     }
     .right{
       flex: 1;
     }
  }
</style>
